.front {
    transform: rotateY(0deg);
}

/* 将back旋转180度，背面朝向用户，我这边选y轴的 */
.back {
    transform: rotateY(-180deg);
}

.front,
.back {
    position: absolute;

    /* 然后设置为背面朝向用户时不可见 */
    backface-visibility: hidden;
    /* 我觉得用linear顺滑一点 */
    transition: 0.8s ease-out;
}

/* 将front旋转180度 */
.middle-flip .front {
    transform: rotateY(180deg);
}
/* 将back旋转180度 */
.middle-flip .back {
    transform: rotateY(0deg);
}
/*居中效果*/
.middle {
    /*使左上角对应到父元素的中心*/
    margin-top: 25px;
    left: 50%;
    position: absolute;
    /*向左向上偏移50%*/
    transform: translate(-50%);
}
.mainbody {
    /*height: 440px;*/
}